<template>
	<view>
		<map class="map" :latitude="latitude" :longitude="longitude" :markers="covers" @markertap='taps'>
		</map>
	   
	</view>
</template>

<script>
	import {
		bicycleList,sendTask
	} from '../../js/api.js'
	export default {
		data() {
			return {
				id: 0, // 使用 marker点击事件 需要填写id
				title: 'map',
				latitude: 0,
				longitude: 0,
				covers: []
			}
		},
		methods: {
			taps(e){
				
				const id=e.detail.markerId;
				uni.showModal({
					content:'开锁?',
					success(res) {
						if(res.confirm==true){
							sendTask({
								device_id:id,
								type:'open'
							})
						}
					},
					
				})
			},
			async getlist(latitude, longitude) {
				const data = await bicycleList({
					lat: latitude,
					lng: longitude
				});
				let cover = [];
				data.forEach(function($v, $k) {
					cover.push({
						id:$v.id,
						latitude: $v.lat,
						longitude: $v.lng,
						width: 1000,
						height: 1000,
						iconPath: '../../static/logo.png',
						callout: {
							content:$v.license_plate
						}
					});
				})
				this.covers = cover;
			}
		},
		onLoad() {
			const that = this;
			uni.getLocation({
				type: 'gcj02',
				success: function(res) {
					that.getlist(res.longitude, res.latitude);
					that.longitude = res.longitude;
					that.latitude = res.latitude;
				}
			});

		}
	}
</script>

<style scoped>
	.map {
		width: 100%;
		height: 100vh;
	}
</style>
